<template>
  <div>
    <!--头部-->
    <Header @scrollTitle="scrollTitle" :chooseValue="6"></Header>
    <!--banner end-->
    <div class="jqgk" style="background:#FFF5E0">
      <div class="contai" style="max-width:1197px;">
        <div class="top_tit">
          <span class="titleFont" id="headline" v-if="pcshow"
            >Transportation</span
          >
          <span
            class="titleFont"
            id="headline"
            style="font-size:36px"
            v-if="!pcshow"
            >Transportation</span
          >

          <div style="text-align:left;margin-top:100px">
            <div class="travel_con">
              <div class="tra_ul">
                <!-- 图片显示 -->
                <el-row style="margin-left:30px;margin-right:30px">
                  <a-spin :spinning="spinning" :delay="delayTime">
                    <div
                      @click="seeInfo(item)"
                      v-for="item in dataList"
                      :key="item.key"
                    >
                      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                        <div
                          v-if="pcshow"
                          class="showPicture"
                          :style="{ float: item.position }"
                        >
                          <img :src="item.url" alt="...." class="foodImgSize" />
                          <div class="foodFontSize">{{ item.title }}</div>
                        </div>
                        <!--  手机端 -->
                        <div
                          @click="seeInfo(item)"
                          v-if="!pcshow"
                          class="showPicture"
                          :style="{ float: item.position }"
                        >
                          <img :src="item.url" alt="...." />
                          <div class="foodFontSize" style="font-size:20px">
                            {{ item.title }}
                          </div>
                        </div>
                      </el-col>
                    </div>
                  </a-spin>
                </el-row>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "./header";
import Footer from "./footer";
import {
  getFoodList,
  getLiveList,
  getPlayList,
  getTrafficList
} from "../request/api";
export default {
  components: { Header, Footer },
  data() {
    return {
      choseValue: 1,
      pcshow: false,
      styletable: { background: "#F2DCCA" },
      mapStyle: { background: "#FFF5E0" },
      dataList: [],
      livList: [],
      trafficList: [],
      shopList: [],
      foodList: [],
      spinning: true,
      delayTime: 500
    };
  },
  beforeCreate() {},
  created() {
    if (this._isMobile()) {
      this.pcshow = false;
      this.dataList = this.foodList;
    } else {
      this.pcshow = true;
      this.dataList = this.foodList;
    }
    this.choseValue = this.$route.query.id;
    this.checkTab(this.choseValue);
  },
  //  监听路由变化
  watch: {
    $route(to, from) {
      this.choseValue = to.query.id;
      this.checkTab(this.choseValue);
    }
  },
  mounted() {
    // getFoodList(this.HOST)
    //   .then(response => {
    //     this.spinning = true;
    //     this.dataList = response.data.map(function(currentValue, index) {
    //       index % 2 == 0
    //         ? (currentValue.position = "left")
    //         : (currentValue.position = "right");
    //       return currentValue;
    //     });
    //     this.spinning = false;
    //   })
    //   .catch(error => {});
  },

  methods: {
    //判断选择哪个标签
    checkTab(tab) {
      switch (tab) {
        case "1":
          this.getFoodListFunction();
          break;
        case "2":
          this.getLiveListFunction();
          break;
        case "3":
          this.getPlayListFunction();
          break;
        case "4":
          this.getTrafficListFunction();
          break;
        default:
          this.getFoodListFunction();
      }
    },
    //美食
    getFoodListFunction() {
      getFoodList(this.HOST)
        .then(response => {
          this.spinning = true;
          this.dataList = response.data.map(function(currentValue, index) {
            index % 2 == 0
              ? (currentValue.position = "left")
              : (currentValue.position = "right");
            return currentValue;
          });
          this.spinning = false;
        })
        .catch(error => {});
    },
    //住宿
    getLiveListFunction() {
      getLiveList(this.HOST)
        .then(response => {
          this.spinning = true;
          this.dataList = response.data.map(function(currentValue, index) {
            index % 2 == 0
              ? (currentValue.position = "left")
              : (currentValue.position = "right");
            return currentValue;
          });
          this.spinning = false;
        })
        .catch(error => {});
    },
    //购物
    getPlayListFunction() {
      getPlayList(this.HOST)
        .then(response => {
          this.spinning = true;
          this.dataList = response.data.map(function(currentValue, index) {
            index % 2 == 0
              ? (currentValue.position = "left")
              : (currentValue.position = "right");
            return currentValue;
          });
          this.spinning = false;
        })
        .catch(error => {});
    },
    //交通
    getTrafficListFunction() {
      getTrafficList(this.HOST)
        .then(response => {
          this.spinning = true;
          this.dataList = response.data.map(function(currentValue, index) {
            index % 2 == 0
              ? (currentValue.position = "left")
              : (currentValue.position = "right");
            return currentValue;
          });
          this.spinning = false;
        })
        .catch(error => {});
    },

    //判断是PC端还是手机端
    _isMobile() {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      return flag;
    },
    //菜单选择
    tabSelect(e) {
      let value = e.target.dataset.index;
      this.choseValue = value;
      this.checkTab(value);
    },
    //详情()
    seeInfo(infoid) {
      this.$router.push({
        path: "/foodInformation",
        query: {
          id: infoid
        }
      });
    },
    //描点跳转
    scrollTitle() {
      var PageId = document.querySelector("#headline");
      window.scrollTo({
        top: PageId.offsetTop - 40,
        behavior: "smooth"
      });
    }
  }
};
</script>
<style>
.food_tra_tab {
  font-size: 28px;
  font-family: "Source Han Sans CN";
  font-weight: bold;
  color: #840207;
  display: inline-block;
  min-width: 193px;
  height: 67px;
  text-align: center;
  line-height: 67px;
  cursor: pointer;
}
.food_tra_tab_mobile {
  font-size: 14px;
  font-family: "Source Han Sans CN";
  font-weight: bold;
  color: #840207;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  padding: 10px;
}
.food_tra_tab_line_mobile {
  display: block;
  width: 100%;
  height: 2px;
  background: #840207;
  opacity: 0.1;
}
.food_tra_tab_line {
  display: block;
  width: 100%;
  height: 8px;
  background: #840207;
  opacity: 0.1;
}
.titleFont {
  font-size: 42px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #840207;
  line-height: 36px;
}
.foodImgSize {
  width: 542px;
  height: 359px;
}
.foodFontSize {
  font-size: 32px;
  font-family: "Source Han Sans CN";
  font-weight: bold;
  color: #840207;
  padding-top: 40px;
  padding-bottom: 55px;
}
.showPicture {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
</style>
